<template>
  <view class="navbar">
    <view class="navbar-content" :class="{ 'center-content': !props.data.showback }">
      <uni-icons 
        v-if="data.showback" 
        type="left" 
        size="30"  
        @click="navigateBack" 
        class="back-icon" 
        color="white"
      ></uni-icons>    
      <view class="navbar-title">{{ data.title }}</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';

const props = defineProps({
  data: {
    type: Object,
    default: () => ({
      title: '默认标题',
      showback: true
    })
  },
});

const data = ref(props.data);

watch(() => props.data, (newData) => {
  console.log('Props data changed:', newData);
  data.value = newData;
}, { deep: true });

// 返回上一页
const navigateBack = () => {
  uni.navigateBack({ delta: 1 });
};
</script>

<style scoped lang='scss'>
.navbar {
  height: 12vh; /* 使用 vh 单位更好地适配不同屏幕 */
  background-image: linear-gradient(to top, #3399ff, #217ad3); 
  color: white;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-top: 70rpx; /* 适配刘海屏 */

  .navbar-content {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* 子元素对齐到容器底部 */
    width: 100%;
    height: 100%;
    .back-icon {
      width: 60rpx;
      height: 60rpx;
      margin-bottom: 2rpx;
    }
    
    .navbar-title {
      font-size: 36rpx;
      font-weight: bold;
      margin-left: 20rpx;
      flex: 1; /* 占据剩余空间 */
      text-align: left; /* 文字左对齐 */
      white-space: nowrap; /* 防止文字换行 */
      overflow: hidden; /* 超出部分隐藏 */
      text-overflow: ellipsis; /* 超出显示省略号 */
      margin-bottom: 2rpx;
    }
  }

  .center-content {
    justify-content: center; 
    
    .navbar-title {
      margin-left: 0;
      text-align: center; /* 居中时文字居中对齐 */
    }
    
    .back-icon {
      display: none; /* 居中时隐藏返回图标 */
    }
  }
}
</style>